<template>
  <div class="sale">
    <div class="top_button">
      <div class="partition"></div>
    </div>

    <el-table
      :data="
        sale.filter(
          (data) =>
            !search ||
            data['编码'].toLowerCase().includes(search.toLowerCase()) ||
            data['名称'].toLowerCase().includes(search.toLowerCase())
        )
      "
      border
      height="calc(100vh - 90px)"
      v-loading="isres"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
      row-key="编码"
    >
      
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column
        v-for="(col, i) in cols"
        :key="i"
        :prop="col"
        :label="col"
        sortable
      ></el-table-column>
      <!-- <el-table-column align="right" width="140" type="expand">
        <template #header>
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
      </el-table-column> -->
    </el-table>
  </div>
  <tool :multipleTable="sale"></tool>
</template>
<script>
import { reactive, toRefs } from "vue";
import { assignordetails } from "@/api/pandian";
import { ElMessage } from "element-plus";
import tool from "./components/tool";
export default {
  components: {
    tool,
  },
  setup() {
    const data = reactive({
      cols: [],
      sale: [],
      isres: false,
      search: "",
    });
    const loaded = async () => {
      data.isres = true;

      const result = await assignordetails.post({house:'小仓'});
      data.isres = false;
      if (result.data.length == 0) {
        data.sale = [];
        ElMessage.success({
          message: "还没有盘呢",
          type: "success",
        });
      } else {
        data.sale = result.data;
        data.cols = Object.keys(result.data[0]);
      }
    };
    loaded();
    return { ...toRefs(data) };
  },
};
</script>